
<style>
	.promotion_list-warp{
		display: flex;
		gap: 20px;
		flex-direction: column;
		max-width: 880px;
		margin: 0 auto;
	}

	.promotion_list_item{
		width: 100%;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: row;
		padding:20px;
		background: var(--bg-color);
	}


	
	.promotion_list_value_number{
		font-weight: bold;
		color: var(--theme_color);
		font-size: 24px;
	}
	.promotion_list_label{
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: center;
		flex: 1;
		overflow: hidden;
	}
	.promotion_list_label_title{
		font-weight: bold;
		line-height: 18px;
		color:var(--theme_color);
	}
	
	.promotion_list_label_value{
		font-weight: 500;
		font-size:16px;
		color: var(--title_color);
	}
	.promotion_list_label_des{
		font-weight: 300;
		display: flex;
		align-items: center;
		line-height: 18px;
		color:var(--date_color);
	
	}
	.promotion_list_label_des_item{
		display: flex;
		gap:6px;
	
	}
	.promotion_list_label_des_item svg{
	margin-top: 2px;
}
	.promotion_list_btn{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
	}
	.coupons_btn{
		font-size: 14px;
		font-weight: 300;
		color: #FFFFFF;
		background: var(--theme_color);
		opacity: 1;
		width: 100%;
		text-align: center;
		padding: 10px 20px;
	}
	.promotion_list_rule{
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.promotion_list_rule-item{
		line-height: 24px;
		padding: 0 10px;
		border-radius: 0px 0px 0px 0px;
		opacity: 0.86;
		font-size: 12px;
		border: 1px solid var(--title_color);
		color:var(--title_color);
	}
	.promotion_list_rule-item-label{
		color:var(--title_color);
	}
	.block_title{
		margin-top: calc(var(--general_layout_spacing) * var(--title_margin_bottom_scale));
	}
	.promotion_wap_hide{
		display: none;
	}
	.promotion_wap_show{
		display: block;
	}
	.promotion_list_item>.icon{
		margin-left: 20px;
    align-self: center;
}
.promotion_list_title{
	width: 120px;
	height: 138px;
	box-sizing: border-box;
	padding: 15px;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--theme_color);
}

	@media (min-width:775px) {
		.promotion_wap_show{
			display: none;
		}
		.promotion_wap_hide{
			display: flex;
		}
		.promotion_list_btn{
			padding-left: 0;
		}
		.promotion_list_label_value{
			font-size:20px;
		}

	.promotion_list_rule-item{
		font-size: 14px;
	}

	}
</style>
	
{% assign  color_style_array =  section.settings.theme_color | split : "," %}
{% assign replace_str =  color_style_array.last %}
{% assign promotion_ids = section.blocks | get_array_values: "promotion" | get_array_values: "id" | join: "," %}

{% get_promotions promotion_ids={promotion_ids} limit=100 output=array %}
<div class="container_wrapper">
  {% include 'block_title_h1', title:lang.promotions.title, detail:section.settings.detail %}
	<div class="promotion_list-warp" style="--title_color:{{section.settings.title_color}};--date_color:{{section.settings.date_color}};--theme_color:{{section.settings.theme_color}};--bg-color:{{ section.settings.theme_color | replace:replace_str, ".04)" }};">
		{% for promotion in promotions %}

		<a class="promotion_list_item"  href="/promotions/{{promotion.handle}}" >
			<div class="promotion_list_label">
				{% comment %} <div class="promotion_list_label_title promotion_wap_hide">{{lang.promotions.title_item}}</div> {% endcomment %}
				<div class="promotion_list_label_value line-clamp2" style="text-align: left;color:{{ section.settings.theme_color | replace:replace_str, ".7)" }};">{{promotion.promotion_name}}</div>
				<div class="promotion_list_rule"></div>
				<div class="promotion_list_label_des" style='color:{{ section.settings.title_color | replace:replace_str, ".7)" }};'>
					<div class="promotion_list_label_des_item">
						<svg t="1683167634586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14851" width="14" height="14"><path d="M512 960c-249.6 0-448-198.4-448-448s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448zM512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384-172.8-384-384-384z" fill="currentColor" p-id="14852"></path><path fill="currentColor"  d="M736 512H512V288c0-19.2-12.8-32-32-32s-32 12.8-32 32v256c0 19.2 12.8 32 32 32h256c19.2 0 32-12.8 32-32s-12.8-32-32-32z" p-id="14853"></path></svg>
						<span class="format-date" data-date="{{promotion.created_at}}" data-format="YYYY-mm-dd">{{ promotion.starts_at | date: "%Y-%m-%d" }}<span>
						<span>～<span>
						{% if promotion.ends_at == -1 %}
						<span>{{lang.coupon.no_expiration_date}}</span>
						{% else %}
						<span class="format-date" data-date="{{promotion.ends_at}}" data-format="YYYY-mm-dd">{{ promotion.ends_at | date: "%Y-%m-%d" }}</span>
						{% endif %}
					</div>
				</div>
			</div>
			
			
			<svg t="1684307748895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1535" width="16" height="16"><path fill="{{ section.settings.title_color | replace:replace_str, ".7)" }}" d="M272.384 848.896l360.0896-337.6128-359.68-336.0768a50.3296 50.3296 0 0 1 0-74.3936 58.88 58.88 0 0 1 79.4112-0.1024l399.36 373.248a50.3296 50.3296 0 0 1 0 74.3424l-399.7184 374.8864a58.88 58.88 0 0 1-79.4112 0.1024 50.3296 50.3296 0 0 1 0-74.3936z" p-id="1536"></path></svg>

			{% comment %} <div class="promotion_list_btn promotion_wap_hide">
				<div class="coupons_btn"  style="margin-top:0px">{{section.settings.button_text}}</div>
			</div> {% endcomment %}
		</a>
		{% endfor %}

	</div>
</div>

<script>
	$(function(){

		function discountToFloorTip(){
      var discount_rule_1 = `{{lang.promotions.discount_rule_1}}`; 
      var discount_rule_5 = `{{lang.promotions.discount_rule_5}}`; 
      var discount_rule_6 = `{{lang.promotions.discount_rule_6}}`; 
      var discount_rule_9 = `{{lang.promotions.discount_rule_9}}`;
	  
      var discount_rule_13 = `{{lang.promotions.discount_rule_13}}`; 
	  
      var discount_rule_17 = `{{lang.promotions.discount_rule_17}}`;
      return {
        rule_not_tip_1: discount_rule_6.replace(/{rule_discount}/g,'{value}').replace(/{rule_condition}/g,'{ordinalLabel}'),
        rule_not_tip_2:discount_rule_1.replace(/{rule_condition}/g,'{label}').replace(/{rule_discount}/g,'{value}'),
        rule_not_tip_3:discount_rule_5.replace(/{rule_discount}/g,'{value}').replace(/{rule_condition}/g,'{label}'),
        rule_not_tip_4:discount_rule_9.replace(/{rule_condition}/g,'{label}').replace(/{rule_discount}/g,'{value}'),
		rule_not_tip_5:discount_rule_13.replace(/{rule_condition}/g,'{label}').replace(/{rule_discount}/g,'{value}'),
		rule_not_tip_6:discount_rule_17.replace(/{rule_condition}/g,'{label}').replace(/{rule_discount}/g,'{value}')
      }
    }
    const tipsObject = discountToFloorTip();


		var promotions = {{promotions|json}};
		function ruleFloor(rule_param, price, number) {
			const rules = rule_param.rule.filter(item => parseFloat(item.value) > 0)

			
			function ordinalNumber(n) {
				return n + (['st', 'nd', 'rd'][n < 20 ? n - 1 : n % 10 - 1] || 'th')
			}

			
			function formatValue(value, type) {
				if ([2, 4, 5].includes(type)) {
					return value + '%';
				}
				if([7].includes(type)){
					return value;
				}
				return  formatMoney(value,_GET_C_SETTING_("currency"))
			}

			
			
			function formatLabel(value, type) {
				if ([2 ,3, 5, 6].includes(type)) {
					return value + "{{lang.promotions.piece}}";
				}
				if([7].includes(type)){
					return value;
				}
				return formatMoney(value,_GET_C_SETTING_("currency"))
			}

			
			function notSatisfyTips() {
				let tipstr = tipsObject.rule_not_tip_4;
				if ([1, 2, 3, 4].includes(rule_param.type)) {
					if([1, 3].includes(rule_param.type) && rule_param.allocation_limit == 999){
						tipstr = tipsObject.rule_not_tip_3;
					}else{
						tipstr = tipsObject.rule_not_tip_2;
					}
				}
				if ([5].includes(rule_param.type)) {
					tipstr = tipsObject.rule_not_tip_1;
				}
				
				if([7].includes(rule_param.type)){
					if(rule_param.allocation_limit == 999){
						tipstr = tipsObject.rule_not_tip_6 //`Buy {rule_condition} items and get {rule_discount} lowest-priced for FREE in every batch`;
					}else {
					  tipstr = tipsObject.rule_not_tip_5 //`Buy {rule_condition} items and get {rule_discount} lowest-priced for FREE`;
					}
				}
				const rulesTipstr = rules.map(item => tipstr.replace(/{ordinalLabel}/g, ordinalNumber(item.ge, rule_param.type)).replace(/{label}/g, formatLabel(item.ge, rule_param.type)).replace(/{value}/g, formatValue(item.value, rule_param.type)).replace(/{ordinalValue}/g, ordinalNumber(item.value)))
				return rulesTipstr
			}

			return notSatisfyTips()
		}


		if(promotions.length){
			promotions.forEach((element,index) => {
				
				const notTips = ruleFloor(element.rule,0,0);
				if(notTips && notTips.length){
					$(".promotion_list_rule").eq(index).append('<div class="promotion_list_rule-item text-white-space">'+notTips[0]+'</div>')
					var itemW = $(".promotion_list_rule").eq(index).find(".promotion_list_rule-item").width()
					var ruleW = $(".promotion_list_rule").eq(index).width();

					var maxNumber = Math.floor((ruleW - 40) / itemW) || 1;
					maxNumber = maxNumber>2?2:maxNumber;
					notTips.forEach(function(item,idx){
						if(!idx){
							return
						}
						if(idx < maxNumber){
							$(".promotion_list_rule").eq(index).append('<div class="promotion_list_rule-item text-white-space">'+item+'</div>')
						}
						if(idx === maxNumber){
							$(".promotion_list_rule").eq(index).append('<div class="promotion_list_rule-item-label">+'+(parseInt(notTips.length) - maxNumber)+'</div>')
						}
					})
				}

			});
		}
		
	})
</script>

{% schema %}
{
	"tag": "section",
	"class": "promotion_list",
	"is_global": false,
	"name": {
		"zh_CN": "活动列表",
		"en_US": "Promotion list"
	},
	"max_blocks": 80,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": ""
		},
		{
			"type": "card_color",
			"id": "theme_color",
			"label": {
				"zh_CN": "活动风格颜色",
				"en_US": "Promotion style color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,1)"
		},
		{
			"type": "card_color",
			"id": "title_color",
			"label": {
				"zh_CN": "活动规则颜色"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,1)"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "选择满减活动",
				"en_US": "Selected full reduction activities"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "满减活动",
				"en_US": "Full reduction activities"
			},
			"type": "promotion-items",
			"settings": [
				{
					"type": "card_promotion",
					"label": {
						"zh_CN": "满减活动",
						"en_US": "Full reduction activities"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"id": "promotion"
				}
			]
		}
	],
	"default": {
		"settings": {
			"button_text": "Get Offer",
			"date_color": "#888888",
			"title_color": "rgba(0,0,0,1)",
			"theme_color": "rgba(0,0,0,1)",
			"detail": "Enjoy Exclusive Discounts on All Products! Get Up to 20% Off Sitewide. Limited Time Offer.Shop Now!"
		},
		"blocks": [
			{
				"promotion": {
					"id": "",
					"title": ""
				},
				"block_type": "promotion-items"
			}
		]
	}
}
{% endschema %}